<script setup>
import {ref} from "vue";
import "../assets/Release/iconfont.css"
import axios from "axios";
import ReleaseContent from "@/components/Release/ReleaseContent.vue";
import router from "@/router/index.js";
import {useUserStore} from "@/stores/UserStore.js";

const list = ref([])

function getList() {
  axios.get("http://127.0.0.1:8081/art/getHisArtList", {
    params: {
      id: useUserStore().getUserInfo.id
    },
  }).then(res => {
    console.log(res.data)
    list.value = res.data;
  }).catch(err => {
    console.log(err)//打印错误信息
  })
}

getList()
</script>

<template>
  <div class = "ReleaseHeader">
    <span class = "ReleaseHeader-left" @click = "router.push({'name':'plCenter'})">
      <i class = "iconfont icon-fanhui" />
    </span>
    <h3 style = "display:inline-block;width: 100%" class = "text-center">历史记录</h3>
    <span class = "ReleaseHeader-right">
      <i class = "iconfont icon-sousuo"></i>
      <span class = "ReleaseHeader-right-span">管理</span>
    </span>
  </div>
  <div class = "time" v-for = "(list,index) in list" :key = "index">
    <h4>{{ list.date }}</h4>
    <div v-for = "(list,index) in list.list" :key = "index">
      <div class = "ReleaseContent">
        <div class = "img">
          <img :src = "list.imgList[0]" alt = "Game">
        </div>
        <div class = "content">
          <span class = "title">{{ list.title }}</span>
          <span>{{ list.getList[0].type }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.time {
  margin: 15px 0;
}

.ReleaseHeader {
  position: relative;
}

.ReleaseHeader-left {
  position: absolute;
  left: 0;
}

.ReleaseHeader-right {
  position: absolute;
  right: 0;
}

.ReleaseContent {
  display: flex;
  margin: 15px 0;
}

img, content {
  display: inline-block;
}

.img {
  img {
    width: 100%;
    height: 120%;
    line-height: 80px;
    text-align: center;
  }

  width: 160px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
}

.content {
  > span {
    display: block;
    line-height: 40px;
  }

  .title {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .name {
    span {
      padding: 2px;
      background: rgba(189, 189, 189, 0.89);
      border-radius: 3px;
    }

  }

  margin-left: 10px;
}
</style>